import * as React from 'react';
//ui
import styles from './style.module.scss'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';

export interface WordTagIndexProps extends React.HTMLAttributes<HTMLDivElement> {
    onEdit: () => void
    onRemove: () => void
}

const WordTagIndex: React.SFC<WordTagIndexProps> = props => {
    const { onEdit, onRemove } = props
    return (
        <div className={styles.main} style={props.style}>
            <div className={styles.content}>
                {props.children}
            </div>
            <div className={styles.edit} onClick={onEdit}>
                <EditOutlined className={styles.icon} />
            </div>
            <div className={styles.remove} onClick={onRemove}>
                <DeleteOutlined className={styles.icon} />
            </div>
        </div>
    )
}

export default WordTagIndex